<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="all">
        <div id="sch">
            <span>姓名</span>
            <input type="text" v-model="person.name">
            <span>性别</span>
            <select v-model="person.gender">
                <option value="1">男</option>
                <option value="2">女</option>    
            </select>
            <span>职位</span>
            <select v-model="person.job">
                <option value="1">职位1</option>
                <option value="2">职位2</option>
                <option value="3">职位3</option>
            </select>
            <button @click="search">查询</button>
        </div>
        <table id="add" v-if="list != null">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>职位</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key = item.name>
                    <td>{{item.name}}</td>
                    <td>{{item.gender}}</td>
                    <td>{{item.job}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        import {createApp} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
        createApp({
            data(){
                return{
                    person:{
                        name:'',
                        gender:'',
                        job:''
                    },
                    list:null
                }
            },
            methods:{
                getdata(){
                    axios.get(`https://web-server.itheima.net/emps/list`).then((res)=>{
                        console.log(res);
                        this.list = res.data.data
                    }).catch((err)=>{
                        alert(err);
                    })
                },
                search(){
                    axios.get(`https://web-server.itheima.net/emps/list?name=${this.person.name}&gender=${this.person.gender}&job=${this.person.job}`
                    ).then((result)=>{
                        console.log(result);
                        this.list = result.data.data
                    }).catch((err)=>{
                        alert(err);
                    })
                }
            },
            mounted(){
                this.search();
            }
        }).mount("#all")
    </script>
</body>
</html>